<template>
  <section class="webview fixHeight">
    <el-scrollbar style="height:100%">
      <el-form ref="form" :model="detail" label-width="100px" class="form">
		  <el-form-item label="区域">
		  	<el-cascader  v-model="detail.regionId" :options="areaList" :props="{
		    value: 'id',
		    label: 'title'
		  }" />
		  </el-form-item>
        <el-form-item label="楼盘名称">
          <el-input v-model="detail.name" />
        </el-form-item>
        <el-form-item label="房屋标签">
          <el-select v-model="detail.label" multiple placeholder="请选择">
            <el-option
              v-for="item in $store.state.user.typeList.filter(item => item.typeSimplify == 'hou_tags_type')"
              :key="item.id"
              :label="item.title"
              :value="item.simplify"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="销售状态">
          <el-select v-model="detail.salesStatus" placeholder="请选择">
            <el-option
              v-for="item in $store.state.user.typeList.filter(item=>item.typeSimplify == 'hou-sale-status')"
              :key="item.id"
              :label="item.title"
              :value="item.simplify"
            />
          </el-select>
        </el-form-item>
		<el-form-item label="经度">
		  <el-input v-model="detail.longitude" placeholder="" />
		</el-form-item>
		<el-form-item label="纬度">
		  <el-input v-model="detail.latitude" placeholder="" />
		</el-form-item>
		<el-form-item label="占地面积">
			  <el-input v-model="detail.floorSpace" />
        </el-form-item>
        <el-form-item label="建筑类型">
          <el-select v-model="detail.buildingType" placeholder="请选择">
            <el-option
              v-for="item in $store.state.user.typeList.filter(item=>item.typeSimplify == 'hou_building_type')"
              :key="item.id"
              :label="item.title"
              :value="item.simplify"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="开盘时间">
          <el-date-picker
            v-model="detail.openingTime"
            type="datetime"
            placeholder="选择日期"
			value-format="yyyy-MM-dd HH:mm"
			format='yyyy-MM-dd HH:mm'
          />
        </el-form-item>
        <el-form-item label="预计交房时间">
          <el-date-picker
            v-model="detail.expectedDeliveryTime"
            type="datetime"
            placeholder="选择日期"
			value-format="yyyy-MM-dd HH:mm"
			format='yyyy-MM-dd HH:mm'
          />
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="detail.address" />
        </el-form-item>
        <el-form-item label="售楼地址">
          <el-input v-model="detail.salesAddress" />
        </el-form-item>

        <el-form-item label="参考单价">
          <el-input v-model="detail.unitPrice" />
        </el-form-item>
        <el-form-item label="所有权年限">
          <el-input v-model="detail.ownershipNianx" />
        </el-form-item>
		<el-form-item label="周边房价">
		  <el-input v-model="detail.peripheralUnitPrice" />
		</el-form-item>
	
		<el-form-item label="装修标准">
		  <el-input v-model="detail.decorationStandardType" />
		</el-form-item>
		<el-form-item label="楼层状况">
		  <el-input v-model="detail.floorCondition" />
		</el-form-item>
        <el-form-item label="开发商">
          <el-select v-model="detail.developersId" placeholder="请选择">
            <el-option
              v-for="item in developersIdOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="容积率">
          <el-input v-model="detail.plotRatio" />
        </el-form-item>
        <el-form-item label="绿化率">
          <el-input v-model="detail.greeningRate" />
        </el-form-item>
        <el-form-item label="规划用户(总户数)">
          <el-input v-model="detail.totalFamily" />
        </el-form-item>
        <el-form-item label="建筑面积">
          <el-input v-model="detail.coveredArea" />
        </el-form-item>
        <el-form-item label="工程进度">
          <el-input v-model="detail.jobSchedule" />
        </el-form-item>
        <el-form-item label="物业费">
          <el-input v-model="detail.propertyFee" />
        </el-form-item>
        <el-form-item label="物业公司">
          <el-input v-model="detail.propertyCompany" />
        </el-form-item>
        <el-form-item label="规划用户(总户数)">
          <el-input v-model="detail.totalFamily" />
        </el-form-item>
        <el-form-item label="总车位数">
          <el-input v-model="detail.carNum" />
        </el-form-item>
        <el-form-item label="地下车位数">
          <el-input v-model="detail.undergroundNum" />
        </el-form-item>
        <el-form-item label="咨询电话">
          <el-input v-model="detail.telephoneConsultation" />
        </el-form-item>
		<el-form-item  label="封面图片">
		  <div class="picList" v-if="detail.showPictures">
		    <div class="item">
		      <img class="pic" :src="detail.showPictures" alt>
		      <i class="el-icon-delete delIcon hand" @click="handlesRemove(item,index)" />
		    </div>
		  </div>
		  <div v-if="!detail.showPictures" class="item itemNo">
		    <el-upload
		      :action="Is.sevenDomain"
		      :multiple="false"
		      name="file"
		      :show-file-list="false"
		      :before-upload="handleUpload"
		      :on-success="handlesSuccess"
		    >
		      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，只能上传1张，且不超过10M</div>
		      <div class="el-upload el-upload--picture-card">
		        <i slot="default" class="el-icon-plus" />
		      </div>
		    </el-upload>
		  </div>
		</el-form-item>
		<el-form-item v-if="$route.query.item" label="展示图片">
		  <div class="picList">
		    <div v-for="(item,index) in resourcesList.filter(item=>item.type == 'hou_house_resources_show_pictures')" class="item">
		      <img class="pic" :src="item.pictureUrl" alt>
		      <i class="el-icon-delete delIcon hand" @click="handleRemove(item,index)" />
		    </div>
		  </div>
		  <div class="item itemNo">
		    <el-upload
		      :action="Is.sevenDomain"
		      :multiple="false"
		      name="file"
			   :limit="10" multiple 
		      :show-file-list="false"
		      :on-success="(res)=>handleSuccess(res,'hou_house_resources_show_pictures')"
		    >
		      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，只能上传10张，且不超过10M</div>
		      <div class="el-upload el-upload--picture-card">
		        <i slot="default" class="el-icon-plus" />
		      </div>
		    </el-upload>
		  </div>
		</el-form-item>
        <el-form-item v-if="$route.query.item" label="沙盘图片">
          <div class="picList">
            <div v-for="(item,index) in resourcesList.filter(item=>item.type == 'hou_house_resources_sand_table')" class="item">
              <img class="pic" :src="item.pictureUrl" alt>
              <i class="el-icon-delete delIcon hand" @click="handleRemove(item,index)" />
            </div>
          </div>
          <div class="item itemNo">
            <el-upload
              :action="Is.sevenDomain"
              :multiple="false"
              name="file"
			   :limit="10" multiple 
              :show-file-list="false"
              :on-success="(res)=>handleSuccess(res,'hou_house_resources_sand_table')"
            >
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，只能上传10张，且不超过10M</div>
              <div class="el-upload el-upload--picture-card">
                <i slot="default" class="el-icon-plus" />
              </div>
            </el-upload>
          </div>
        </el-form-item>
		<el-form-item v-if="$route.query.item" label="募集视频">
		  <el-upload
		    accept="video/mp4"
		    :action="Is.sevenDomain"
		    :file-list="fileListIntroduce"
		    :show-file-list="true"
		    :before-remove="(res)=>{detail.videoPath='';return true}"
		    :on-success="(res,file)=>{if(res.code == 200){detail.videoPath='';detail.videoPath=res.data;}}"
		  >
		    <span
		      slot="tip"
		      class="el-upload__tip"
		      style="padding-left:15px;"
		    >建议上传mp4格式视频</span>
		    <div class="avatarWrap">
		      <el-button type="success" round class="button">点击上传</el-button>
		    </div>
		  </el-upload>
		</el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">提交</el-button>
          <el-button @click="cancel">返回</el-button>
        </el-form-item>
      </el-form>
    </el-scrollbar>
  </section>
</template>
<script>
import { resourcesAdd, resourcesList, resourcesDelete, permitList, permitAdd, permitUpdate, permitDelete, developersList, propertiesAdd, propertiesUpdate,areaList } from '@/api/api'
export default {
  data() {
    return {
		fileListIntroduce: [],
      resourcesList: [],
      developersIdOptions: [],
	   areaList: [],
      permit: {
        'boundBuilding': '',
        'issuingTime': '',
        'permitNum': ''
      },
      detail: {
        'address': '',
        'buildingType': '',
        'carNum': 0,
        'coveredArea': '',
        'decorationStandardType': '',
		'peripheralUnitPrice':'',
        'developersId': '',
        'expectedDeliveryTime': '',
        'floorCondition': '',
        'floorSpace': '',
        'greeningRate': '',
        'id': '',
        'jobSchedule': '',
        'label': '',
        'latitude': 0,
        'longitude': 0,
		'regionId':'',
        'name': '',
        'openingTime': '',
		'longitude':0,
		'latitude':0,
        'ownershipNianx': 0,
        'plotRatio': 0,
        'propertyCompany': '',
        'propertyFee': 0,
        'salesAddress': '',
        'salesStatus': '',
        'telephoneConsultation': '',
        'totalFamily': 0,
        'undergroundNum': 0,
        'unitPrice': 0,
		'videoPath':'',
		'showPictures':''
      }
    }
  },
  created() {
    this.getMb()
	areaList('b0cfac5e-7d09-45ae-a909-0dcb679add58').then(({
		data
	}) => {
		this.areaList = data
	})
    if (this.$route.query.item) {
      this.detail = JSON.parse(this.$route.query.item)
      resourcesList(this.detail.id).then(({ data }) => {
        this.resourcesList = data
      })
      this.detail.label = this.detail.label.split(',')
    }
  },
  methods: {
	  handlesSuccess(res) {
	    if (res.code === 200) {
	     this.detail.showPictures=res.data
	    }
	  },
	  handlesRemove(item, index) {
	        this.detail.showPictures=''
	      },
    handleRemove(item, index) {
      resourcesDelete([item.id]).then(data => {
        Is.tip('删除成功')
        resourcesList(this.detail.id).then(({ data }) => {
          this.resourcesList = data
        })
      })
    },
    // 上传成功之后的回调
    handleSuccess(res, type) {
      if (res.code === 200) {
        resourcesAdd({
          dataId: this.detail.id,
          resourcesList: [{ pictureUrl: res.data, type: type }]
        }).then(data => {
          Is.tip('上传成功')
          resourcesList(this.detail.id).then(({ data }) => {
            this.resourcesList = data
          })
        })
      }
    },
    getMb() {
      developersList({
        curPage: 1,
        pageSize: 9999,
        name: ''
      }).then(({ data }) => {
        this.developersIdOptions = data.records
      })
    },

    // 上传图片之前的验证
    handleUpload() {
    },
    // 上传成功之后的回调

    // 添加/编辑
    submit() {
      // 验证不通过则不提交
      if (!this.vertify()) {
        return false
      }
	  var prad=this.detail;
	  prad.regionId=this.detail.regionId.toString();
      const param = JSON.parse(JSON.stringify(prad))
      param.label = param.label.join(',')
      if (this.$route.query.item) {
        // 编辑
        propertiesUpdate(param).then(data => {
          Is.tip('编辑成功', 2000, 'success')
          this.$router.back()
        })
      } else {
        // 新增
        propertiesAdd(param).then(data => {
          Is.tip('添加成功', 2000, 'success')
          this.$router.back()
        })
      }
    },
    // 返回
    cancel() {
      this.$router.back()
    },
    vertify() {
      // if (Is.empty(this.detail.title)) {
      //   Is.tip('请输入标题')
      //   return false
      // }
      return true
    }
  }}
</script>
